package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ DatePicker() {
	@layouts.DocsLayout(
		"Date Picker",
		"Calendar interface for selecting and formatting dates. Uses Popover for the popup.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "With Label",
						ID:   "with-label",
					},
					{
						Text: "Custom Placeholder",
						ID:   "custom-placeholder",
					},
					{
						Text: "Selected Date",
						ID:   "selected-date",
					},
					{
						Text: "Disabled",
						ID:   "disabled",
					},
					{
						Text: "Formats",
						ID:   "formats",
					},
					{
						Text: "With Time",
						ID:   "with-time",
					},
					{
						Text: "Form",
						ID:   "form",
					},
				},
			},
			{
				ID:   "api-reference",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						Text: "DatePicker",
						ID:   "date-picker",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Date Picker",
			Description: templ.Raw("Calendar interface for selecting and formatting dates. Uses <a href='/docs/components/calendar' class='text-primary underline underline-offset-2 hover:opacity-80 transition-opacity'>Calendar</a> for date selection and <a href='/docs/components/popover' class='text-primary underline underline-offset-2 hover:opacity-80 transition-opacity'>Popover</a> for the popup."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Date Picker",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.DatePickerDefault(),
				PreviewCodeFile: "date_picker_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "datepicker",
					JSFiles:       []string{"datepicker", "calendar", "popover"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Label",
					ShowcaseFile:    showcase.DatePickerWithLabel(),
					PreviewCodeFile: "date_picker_with_label.templ",
					ID:              "with-label",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Custom Placeholder",
					ShowcaseFile:    showcase.DatePickerCustomPlaceholder(),
					PreviewCodeFile: "date_picker_custom_placeholder.templ",
					ID:              "custom-placeholder",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Selected Date",
					ShowcaseFile:    showcase.DatePickerSelectedDate(),
					PreviewCodeFile: "date_picker_selected_date.templ",
					ID:              "selected-date",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Disabled",
					ShowcaseFile:    showcase.DatePickerDisabled(),
					PreviewCodeFile: "date_picker_disabled.templ",
					ID:              "disabled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Formats",
					ShowcaseFile:    showcase.DatePickerFormats(),
					PreviewCodeFile: "date_picker_formats.templ",
					ID:              "formats",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Time",
					ShowcaseFile:    showcase.DatePickerWithTime(),
					PreviewCodeFile: "date_picker_with_time.templ",
					ID:              "with-time",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Form",
					ShowcaseFile:    showcase.DatePickerForm(),
					PreviewCodeFile: "date_picker_form.templ",
					ID:              "form",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api-reference",
			}) {
				@modules.APILegend()
				<div id="date-picker">
					@modules.APITable(modules.APITableProps{
						Title:       "DatePicker",
						Description: "Main date picker component that triggers the popover calendar.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "randomID",
								Description: "Unique identifier for the date picker component",
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "\"\"",
								Description: "Additional CSS classes to apply to the trigger button",
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "nil",
								Description: "Additional HTML attributes to apply to the trigger button",
							},
							{
								Name:        "Value",
								Type:        "time.Time",
								Default:     "time.Time{}",
								Description: "Current selected date value",
							},
							{
								Name:        "Format",
								Type:        "Format",
								Default:     "locale-medium",
								Description: "Display format for the selected date",
							},
							{
								Name:        "LocaleTag",
								Type:        "LocaleTag",
								Default:     "en-US",
								Description: "BCP 47 Locale Tag for language and regional format",
							},
							{
								Name:        "StartOfWeek",
								Type:        "*calendar.Day",
								Default:     "nil",
								Description: "Optional start of week passed to Calendar component. When nil, Calendar defaults to Monday. Use calendar.Sunday through calendar.Saturday constants.",
							},
							{
								Name:        "Placeholder",
								Type:        "string",
								Default:     "Select a date",
								Description: "Placeholder text when no date is selected",
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the date picker is disabled",
							},
							{
								Name:        "HasError",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the date picker should display error styling",
							},
							{
								Name:        "Name",
								Type:        "string",
								Default:     "ID value",
								Description: "Name attribute for the hidden input field",
							},
						},
					})
				</div>
			}
		}
	}
}
